NO DUPLICAR PORQUE: Debido a que estoy usando específicamente el paquete npm "google-map-react" para manejar la API de Google Maps, no creo que esta sea una pregunta duplicada. Esta es más una pregunta sobre el paquete "google-map-react" que sobre la API de Google Maps.
El componente GoogleMapReact (del paquete npm "google-map-react") detecta incorrectamente la ubicación de los eventos de clic por algún motivo. Específicamente, su objeto de evento "onClick" tiene valores de latitud/longitud incorrectos. Las coordenadas siempre se desplazan hacia el sureste (o abajo a la derecha) y la magnitud del error parece estar relacionada con el nivel de zoom... es decir. cuando se aleja mucho, el error en latitud/longitud es de muchos cientos de kilómetros, y se reduce a medida que se acerca el mapa. Otra forma de verlo es que las coordenadas siempre se desplazan en la pantalla en la misma cantidad de píxeles x e y.
No sé mucho sobre la API de Google Maps a la que accede este paquete detrás de escena, y preferiría una solución que use el paquete "google-map-react" para poder mantener esa capa de abstracción sobre la base de Google Maps. API.
Estoy usando la versión 2.1.3 de "google-map-react".
Encontré el problema:
Tenía una hoja de estilo global que aplicaba margen y relleno a todos los elementos "div". El paquete "google-map-react" envuelve el mapa de Google en un montón de elementos div y, de alguna manera, el relleno y el margen de esos elementos estropeaban la ubicación/detección de coordenadas.
Mi solución: en el elemento principal más cercano del componente "GoogleMapReact", agregué un nombre de clase especial ('remove-global-div-styling'... pero el nombre obviamente no es importante) y luego usé el siguiente css para preservar mis aplicaciones en general estilo mientras se elimina el estilo de los divs generados por "google-map-react":
.remove-global-div-styling div { margin: 0; padding: 0; ...etc (based on whatever unwanted styling is being applied to those divs) }Solución general: si usa el paquete "google-map-react" y experimenta algo como mi problema, use las herramientas de desarrollo para inspeccionar los divs generados por "google-map-react" y ver si se les está aplicando algún estilo inesperado. en otra parte de su aplicación.